<template>
  <div class="app-container detail" v-loading="loading">
    <el-row class="headline">
      <el-col :span="3">
        <span>放款登记</span>
      </el-col>
      <el-col :span="9" :offset="7">
        <el-steps align-center :space="100">
          <el-step title="初审" class="stepActive" />
          <el-step title="复审" class="stepActive" />
          <el-step title="终审" class="stepActive" />
          <el-step title="放款" class="stepActive" />
          <el-step title="还款" />
          <el-step title="完成" />
        </el-steps>
      </el-col>

      <el-col :span="1" :offset="1">
        <el-button size="small" :icon="ArrowLeft" @click="goBack">返回</el-button>
      </el-col>
    </el-row>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24"> 担保信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="loanInfo" style="max-width: 460px">
            <!-- <el-form-item label="担保性质">
              <el-select v-model="formLabelAlign.region" placeholder="请选择">
                <el-option label="个人" value="个人" />
                <el-option label="对公" value="对公" />
              </el-select>
            </el-form-item> -->
            <el-form-item label="担保产品">
              <el-input v-model="loanInfo.loan_name" disabled />
            </el-form-item>
            <el-form-item label="还款方式">
              <el-input v-model="loanInfo.method" disabled />
            </el-form-item>
            <el-form-item label="申请金额">
              <el-input v-model="loanInfo.apply_quota" disabled>
                <template #append>
                  <span> 元</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="担保类型">
              <el-input v-model="loanInfo.loan_type" disabled />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="100px" :model="loanInfo" style="max-width: 460px">
            <el-form-item label="担保用途">
              <el-input v-model="loanInfo.purpose_name" disabled />
            </el-form-item>
            <el-form-item label="担保期限">
              <el-input v-model="loanInfo.loan_stages" disabled>
                <template #append>
                  <span> 个月</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="审批金额">
              <el-input v-model="loanInfo.approval_amount" disabled>
                <template #append>
                  <span> 元</span>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">费用信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="loanInfo" style="max-width: 460px">
            <el-form-item label="综合利率">
              <el-input v-model="loanInfo.approval_rate" disabled>
                <template #append>
                  <span> %</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="管理费">
              <el-input v-model="loanInfo.manage_amt" disabled>
                <template #append>
                  <span> 元</span>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="服务费">
              <el-input v-model="loanInfo.region" disabled>
                <template #append>
                  <span> 元</span>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">审核信息</el-col>
      </el-row>
      <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
        <el-table-column label="审核时间" align="center" prop="audit_time" />
        <el-table-column label="审核类型" align="center" prop="type">
          <template #default="scope">
            <div>{{ loantype(scope.row.type) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
          <template #default="scope">
            <div>{{ statusType(scope.row.status) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="审核人员" align="center" prop="account_name"> </el-table-column>
        <el-table-column label="审核结果" align="center" prop="details"> </el-table-column>
      </el-table>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">合同管理</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="loanInfo" style="max-width: 460px">
            <el-form-item label="合同号">
              <el-input v-model="loanInfo.contract_code" disabled />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">银行资料</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="开户行">
              <el-input v-model="formLabelAlign.bankName" disabled />
            </el-form-item>
            <el-form-item label="开户地">
              <el-input v-model="formLabelAlign.openingBranch" disabled />
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input v-model="formLabelAlign.cardNo" disabled />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="户名">
              <el-input v-model="name" disabled />
            </el-form-item>
            <el-form-item label="支行名称">
              <el-input v-model="formLabelAlign.openingBranch" disabled />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">放款审批</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="放款通道">
              <el-radio-group v-model="radio" disabled>
                <el-radio :label="2" size="default">金融机构放款</el-radio>
                <el-radio :label="1" size="default">委托银行放款</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">放款登记</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="放款金额">
              <el-input v-model="loanInfo.approval_amount" disabled />
            </el-form-item>
            <el-form-item label="放款凭证">
              <FileUpload v-model="loanInfo.loan_voucher" ref="RefFile" v-if="route.query.status == '9'"></FileUpload>
              <div v-else :disabled="route.query.status != 9">
                <el-button @click="getDown">查看</el-button>
              </div>
            </el-form-item>

            <el-form-item label="放款备注">
              <el-input v-model="loanInfo.loan_notes" :disabled="route.query.status != 9" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="银行交易流水号">
              <el-input v-model="loanInfo.loan_serial" :disabled="route.query.status != 9" />
            </el-form-item>
            <el-form-item label="放款时间">
              <el-date-picker v-model="loanInfo.loan_time" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:MM:ss" type="date" placeholder="请选择时间" :disabled="route.query.status != 9" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row>
        <el-col :span="6" :offset="3"> <el-button type="info" @click="onSubmit" v-if="route.query.status == 9">提交</el-button></el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { loanDisbursement, loanDisbursementList, getLoanFinalAudit } from "@/api/loanBefore";
import { getFileDown } from "@/api/file";
import { bankCardDetail } from "@/api/afterLoan/index";
import { reactive, ref } from "vue";
import { loanTypes, methodType } from "@/utils/dict";
import $tab from "@/plugins/tab.js";
import router from "@/router";
import { fileHttpUrl } from "@/api/file";
const { proxy } = getCurrentInstance();
const route = useRoute();
const activeName = ref("1");
const loading = ref(false);
const modelValue = ref();
const labelPosition = ref("right");
const radio = ref("");
const RefFile = ref();
const name = ref(route.query.name);
// {{ loanInfo.loan_voucher }}
const state = reactive({
  jobList: [], //审核详情
  loanInfo: {}, //担保信息
  formLabelAlign: {
    name: "",
    region: "",
    type: "",
  },
  farmData: {
    time: "",
  },
});

function statusType(val) {
  switch (val) {
    case 1:
      return "通过";
    case 2:
      return "驳回";
    case 3:
      return "拒绝";
  }
}

function loantype(val) {
  switch (val) {
    case 1:
      return "初审";
    case 2:
      return "复审";
    case 3:
      return "终审";
  }
}

const { formLabelAlign, loanInfo, jobList, farmData } = toRefs(state);

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

//下载
function getDown() {
  const name = "";
  // window.open();
  //   // console.log(res, "8888");
  fileHttpUrl({ file_path: loanInfo.value.loan_voucher }).then((res) => {
    window.open("http://116.228.78.26:52800/" + res.data[0].http_url);
  });
  // getFileDown(name, loanInfo.value.loan_voucher).then((res) => {
  // });
}

//提交
function onSubmit() {
  loading.value = true;

  let loan_voucher;
  if (loanInfo.value.loan_voucher != null && loanInfo.value.loan_voucher != "") {
    let data = loanInfo.value.loan_voucher.split("=");
    loan_voucher = data[2];
  }
  const params = {
    loan_voucher: loan_voucher,
    loan_serial: loanInfo.value.loan_serial,
    loan_notes: loanInfo.value.loan_notes,
    loan_time: loanInfo.value.loan_time,
    id: route.query.appplyId,
  };

  loanDisbursement(params).then((res) => {
    console.log(res, "登记完成");
    if (res.code == 200) {
      loading.value = false;
      proxy.$modal.msgSuccess(res.msg);
      goBack();
    } else {
      loading.value = false;
      return ElMessage({
        message: res.msg,
        type: "warning",
      });
    }
  });
}

//查询详情
function getOption() {
  loanDisbursementList({
    page_count: 1,
    page_size: 10,
    id: route.query.appplyId,
  }).then((res) => {
    if ((res.code = 200)) {
      if (res.data.list.length > 0) {
        loanInfo.value = { ...res.data.list[0] };
        loanInfo.value.method = methodType(res.data.list[0].method);
        loanInfo.value.loan_type = loanTypes(res.data.list[0].loan_type);
        radio.value = res.data.list[0].channel;
        console.log(loanInfo.value.channel, "loanInfo.value.channel");
        getBankCardInfo(res.data.list[0].debit_card_id);
      }
    }
    console.log(res, "rees");
  });
}

/**获取银行卡信息*/
function getBankCardInfo(vl) {
  bankCardDetail(vl).then((res) => {
    console.log(res, "银行卡");
    formLabelAlign.value.bankName = res.data.bankName;
    formLabelAlign.value.openingBranch = res.data.openingBranch;
    formLabelAlign.value.cardNo = res.data.cardNo;
    formLabelAlign.value.openingBranch = res.data.openingBranch;
    lastLookover();
  });
}

//查询终审详情
function lastLookover() {
  getLoanFinalAudit(route.query.appplyId).then((res) => {
    console.log(res, "终审详情");
    if (res.code == 200) {
      if (res.data.length > 0) {
        jobList.value = res.data;
      }
    }
  });
}

function goBack() {
  proxy.$tab.closeOpenPage("process");
}

getOption();
console.log(route.query, "route.query");
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
.stepActive {
  background: black;
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__title.is-finish) {
    color: #fff;
  }
  :deep(.el-step__title.is-wait) {
    color: #fff;
  }
  :deep(.el-step__title.is-process) {
    color: #fff;
    font-weight: 400;
  }
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
:deep(.el-select) {
  width: 100%;
}
.headline {
  margin-bottom: 5px;
}
</style>
